import { Button, Form, Input, Toast } from "antd-mobile";
import { Link, useNavigate } from "react-router-dom";
import { useContext, useEffect } from "react";
import { loginAPI } from "../services/auth";
import { dalImg, setToken } from "../utils/tools";
import { context } from "../components/AppProvider";

function Login() {
  const { doLogin, isLogin } = useContext(context);
  const navigate = useNavigate();

  // isLogin改变是异步的，我们可以在这个位置监听它的改变，为true之后，跳转页面
  useEffect(() => {
    if (isLogin) navigate("/user");
  }, [isLogin]);

  return (
    <div className="login">
      <Link to="/">
        <img src={dalImg("")} className="logo" alt="" />
      </Link>
      <Form
        // onFinish事件在触发submit的时候执行
        onFinish={async (v) => {
          // console.log(v);
          const res = await loginAPI(v);
          if (res.success) {
            Toast.show({
              icon: "success",
              content: "登录成功",
            });
            setToken(res.data);
            // console.log(1);
            doLogin!(); // 修改登录状态
            // console.log(2);

            // 不能直接跳转，数据改变时异步的，我们需要监听数据的改变之后再跳转
            // navigate("/user");
            // console.log(3);
          } else {
            Toast.show({
              icon: "fail",
              content: res.data,
            });
          }
        }}
      >
        <Form.Item
          // name属性表示表单提交的时候的数据的属性名，一定要有
          name="userName"
          label="用户名"
          rules={[
            {
              required: true,
              message: "用户名不能为空",
            },
          ]}
        >
          <Input placeholder="请输入用户名" clearable />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input type="password" clearable placeholder="请输入密码" />
        </Form.Item>
        <Form.Item>
          <Button type="submit" color="primary">
            登录
          </Button>
        </Form.Item>
      </Form>
      <p
        onClick={() => {
          navigate("/reg");
        }}
      >
        没有账号，点击注册
      </p>
    </div>
  );
}

export default Login;
